<template>
    <!-- vue3页面 -->
    
    <div>
        <el-button @click="goOne" type='primary'>生成动态一</el-button>
        <el-button @click="goTwo" type='success'>生成动态二</el-button>

        
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
import { useRouter,useRoute} from 'vue-router'
import { useStore } from 'vuex'
export default defineComponent({
    name: 'fourThree',
    setup() {
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const paramsID = ref(0)
        const addPath:any = reactive(
            {
                path: '/',
                component: ()=>import('../../components/public.vue'),
                children: [
                    {
                        path: '/fourOne/'+(paramsID.value+1),
                        name: 'fourOne'+(paramsID.value+1),
                        component: ()=>import('@/views/four/fourOne.vue')
                    }
                ]
            }
        )
        const addPath2:any = reactive(
            {
                path: '/',
                component: ()=>import('../../components/public.vue'),
                children: [
                    {
                        path: '/fourOne/'+(paramsID.value+2),
                        name: 'fourOne'+(paramsID.value+2),
                        component: ()=>import('@/views/four/fourOne.vue')
                    }
                ]
            }
        )
        const goOne = ()=>{
            console.log('1111')
            router.addRoute(addPath)
            console.log(store.state,'store')
            getTabs(addPath)
            router.push('/fourOne/1')
        }
        const goTwo = ()=>{
            console.log('2222') 
            router.addRoute(addPath2)
            getTabs(addPath2)
            router.push('/fourOne/2')
        }
        const getTabs = (item:any)=>{
            store.state.activeIndex = item.children[0].path
            store.state.navList.push(
                {
                    title:item.children[0].name,
                    name:item.children[0].name,
                    stutas:1,
                    path:item.children[0].path
                }
            )
            store.state.includeList.push(item.children[0].name)
        }
        
        return {
            goOne,
            goTwo
        }
    }
})
</script>

<style scoped>

</style>